<template>
    <el-dialog  :close-on-click-modal = "false" title="新增" :visible.sync="dialogVisible" class="re-dialog" width="495px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
            <el-row v-for="(sItem,index) in formConfig" :key="index">
                <el-form-item v-bind:label="sItem.label" v-bind:prop="sItem.code">
                    <el-input v-if="sItem.type === 'input'" v-bind:placeholder="sItem.placeholder" v-model="ruleForm[sItem.code]"></el-input>
                    <el-input v-else-if="sItem.type === 'numberInput'" v-bind:placeholder="sItem.placeholder" v-model.number="ruleForm[sItem.code]"></el-input>
                    <el-select class="w-100" v-else-if="sItem.type === 'select'" v-model="ruleForm[sItem.code]" v-bind:placeholder="sItem.placeholder">
                        <el-option v-for="(ssItem,ssIndex) in sItem.data" :key="ssIndex" v-bind:label="ssItem.label" v-bind:value="ssItem.value"></el-option>
                    </el-select>
                    <el-radio-group v-else-if="sItem.type === 'radio'" v-model="ruleForm[sItem.code]">
                        <el-radio v-for="(ssItem,ssIndex) in sItem.data" :key="ssIndex" class="radio-li" v-bind:value="ssItem.value" v-bind:label="ssItem.label"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-row>
           <!-- <el-form-item :error = "error.tips" label = "所属窗口：" class="row">
                <div @click="slide" class="select-row">
                    <span v-if = "!currentName" class="default-placholder">请选择所属窗口</span>
                    <span v-if = "!!currentName" class="windos-text">{{currentName}}</span>
                    <div class="slideup-wrapper" v-bind:class="{slideup:toggle}">
                        <div class="select-ul-wrapper">
                            <ul v-for="(item,index) in windowsConfig" :key="index" class="select-ul">
                                <li v-on:click="onSelect(sItem)" v-bind:class="{active:sItem.name == currentName}" v-for="(sItem,sIndex) in item" :key="sIndex">{{sItem.name}}</li>
                            </ul>
                        </div>
                        <div class="triangle"></div>
                    </div>
                </div>
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <button class="footer-btn cancel" @click="dialogVisible = false">取 消</button>
            <button @click="onSubmit('ruleForm')" class="footer-btn sure">确定</button>
        </span>
    </el-dialog>
</template>

<script>
import Pusub from "../../utils/pubsub";
import Pubsub from "../../utils/pubsub";
import { chunkArr } from "../../utils";
import { findByDictCode} from "../../config/api.js";

let defaultFormConfig = [
    {
        label: "办理事项：",
        value: "",
        code: "handleInfo",
        type: "select",
        placeholder: "请选择办理事项",
        data: [{ label: "事项1", value: "1" }]
    },
    {
        label: "申请单位/人名称：",
        value: "",
        code: "applyPersonName",
        type: "input",
        placeholder: "申请单位/人名称"
    },
    {
        label: "申请单位/人证件类型：",
        value: "",
        code: "applyPersonCardType",
        type: "select",
        placeholder: "请选择申请单位/人证件类型",
        data: [{ label: "身份证", value: "1" }]
    },
    {
        label: "申请单位/人证件号码：",
        value: "",
        code: "applyPersonCardNum",
        type: "input",
        placeholder: "请输入申请单位/人证件号码"
    },
    {
        label: "邮寄地址：",
        value: "",
        code: "applyPersonAddress",
        type: "input",
        placeholder: "请输入邮寄地址"
    },
    {
        label: "所属区域：",
        value: "",
        code: "name4",
        type: "input",
        placeholder: "请选择所属区域",
        data: [{ label: "区域1", value: "1" }]
    },
    {
        label: "联系人姓名：",
        value: "",
        code: "handlePersonName",
        type: "input",
        placeholder: "请输入联系人姓名"
    },
    {
        label: "联系电话：",
        value: "",
        code: "handlePersonTelNo",
        type: "numberInput",
        placeholder: "请输入联系电话"
    },
    {
        label: "取件方式：",
        value: "",
        code: "getType",
        type: "radio",
        data: [
            { label: "到付邮寄", value: "1" },
            { label: "现场取件", value: "2" }
        ]
    }
];
export default {
    data() {
        return {
            dialogVisible: false,
            toggle: false, //
            currentName: "", //记录当前选中的窗口
            defaultShowList: [],
            formConfig: [],
            fileList: [],
            error:{
                tips:""
            },
            windowsConfig: [],
            defaultWindowsList: [
                { name: "1" },
                { name: "2" },
                { name: "3" },
                { name: "4" },
                { name: "5" },
                { name: "6" },
                { name: "7" },
                { name: "8" },
                { name: "9" },
                { name: "10" },
                { name: "11" },
                { name: "12" },
                { name: "13" },
                { name: "14" },
                { name: "15" },
                { name: "16" },
                { name: "17" },
                { name: "18" },
                { name: "19" },
                { name: "20" }
            ], //窗口配置
            ruleForm: {
                name: "111",
                applyPersonName: "",
                phone: ""
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    }
                ]
            },
            mailTypeCode:[]//取件类型
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe("showAddInquiryListDialog", () => {
            this.ruleForm = {
                applyPersonName: "hello",
                handleInfo: "1"
            };
            this.dialogVisible = true;
        });
        this.handleDefaultConfig();
        this.handleDefaultWindowsConfig();
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        /**
         * 设置默认form表单配置
         */
        handleDefaultConfig() {
            this.formConfig = defaultFormConfig;
        },
        /**
         * 设置所属窗口配置
         */
        handleDefaultWindowsConfig() {
            this.windowsConfig = chunkArr(this.defaultWindowsList, 5);
        },
        /**
         * 提交
         */
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                console.log(this.ruleForm);
                if(!this.currentName){
                    this.error.tips = "请选择所属窗口";
                    valid = false;
                    return;
                }else{
                    this.error.tips = "";
                }
                if (valid) {
                    // alert("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /**
         * 选择所属窗口
         */
        onSelect(item) {
            this.currentName = item.name;
            this.error.tips = "";
        },
        /**
         * 所属窗口弹出
         */
        slide() {
            this.toggle = !this.toggle;
            console.log(this.toggle);
        },
        /**
         * 获取数据字典--取件类型
         */
        getDictCode() {
            findByDictCode({ dictCode: 'getType' }).then((res = {}) => {
                    this.mailTypeCode = res.data||[];
                // if(res.data&&res.data.length){
                //     this.mailTypeCode = res.data||[];
                //     let mailTypeCodeTitle=[];
                //     res.data.map(item=>{
                //         mailTypeCodeTitle.push(item.dictDataName);
                //     })
                //     this.mailTypeCodeTitle=mailTypeCodeTitle;
                // }
            });
        },
    }
};
</script>

<style lang = "scss" scoped>
.el-label {
    display: inline-block;
    width: 140px;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
}
.row {
    margin-bottom: 45px;
    font-size: 12px;
    /* display: flex;
    align-items: center; */
}
.w-100 {
    width: 100%;
}
.default-placholder{
    color:#c1c5cc;
    padding-left: 15px;
}
.windos-text{
    padding-left: 15px;
}
.select-row {
    height: 34px;
    border: 1px solid #d2d2d2;
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    .slideup-wrapper {
        transition: height 0.2s ease-in-out;
        z-index: 999;
        height: 0;
        position: absolute;
        top: calc(100% + 6px);
        width: 305px;
        border: none;

        margin-left: -1px;
        padding: 2px;
        box-sizing: border-box;

        &.slideup {
            height: 118px;
            border: 1px solid #d2d2d2;

            .triangle {
                opacity: 1;
            }
        }
    }
    .select-ul-wrapper {
        height: 100%;
        background: #fff;

        /* display: none; */
        overflow: hidden;
    }
    .triangle {
        opacity: 0;
        position: absolute;
        height: 0;
        width: 0;
        top: -6px;
        left: 50%;
        margin-left: -6px;
        border-bottom: 6px solid #d2d2d2;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        &:after {
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border-bottom: 5px solid #fff;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            left: -5px;
            top: 1px;
        }
    }
    .select-ul {
        display: flex;
        li {
            flex: 1;
            margin: 2px;
            background: #eeeeee;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &.active {
                background: #1a36a9;
                color: #fff;
            }
        }
    }
}
.footer-btn {
    width: 66px;
    height: 32px;
    border-radius: 3px;
    &:active {
        opacity: 0.8;
    }
}
.sure {
    background-color: #1a36a9;
    color: #fff;
}
.cancel {
    background-color: #d2d2d2;
    margin-right: 40px;
}
</style>
<style>
.radio-li span {
    font-size: 12px !important;
    color: #606266;
}
.re-dialog .el-form-item {
    margin-bottom: 19px !important;
}
.re-dialog .el-dialog__body {
    padding-bottom: 0 !important;
}
.re-dialog .el-dialog__footer {
    border-top: 1px solid #eee;
    padding: 20px !important ;
}
.re-dialog .el-input__inner {
    height: 34px !important;
    line-height: 34px !important;
}
.el-form-item__content,
.el-form-item__label {
    line-height: 34px;
}

.is-error .select-row{
    border-color:#F56C6C;
}
</style>
